{% extends "layout.html" %}

{% block title %}模组数据统计{% endblock %}

{% block content %}
<div class="container mt-4">
    <h2 class="text-center mb-4">模组浏览量统计（饼图）</h2>
    <div id="pieChart" style="width: 100%; height: 600px;"></div>

    <h2 class="text-center mb-4 mt-5">模组标签词云图</h2>
    <div id="wordCloud" style="width: 100%; height: 600px;"></div>

    <h2 class="text-center mb-4 mt-5">模组红黑票分布（散点图）</h2>
    <div id="scatterChart" style="width: 100%; height: 600px;"></div>
</div>

<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts-wordcloud@2.0.0/dist/echarts-wordcloud.min.js"></script>
<script>
    // 饼图配置
    const pieChartDom = document.getElementById('pieChart');
    const pieChart = echarts.init(pieChartDom);

    const pieOption = {
        title: {
            text: '模组浏览量统计',
            subtext: '数据来源：MCMod.cn',
            left: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
            type: 'scroll',
            orient: 'vertical',
            right: 10,
            top: 20,
            bottom: 20,
            data: {{ legend_data | tojson }}
        },
        series: [
            {
                name: '浏览量',
                type: 'pie',
                radius: '55%',
                center: ['40%', '50%'],
                data: {{ series_data | tojson }},
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };

    pieChart.setOption(pieOption);

    // 词云图配置
    const wordCloudDom = document.getElementById('wordCloud');
    const wordCloudChart = echarts.init(wordCloudDom);

    const wordCloudOption = {
        title: {
            text: '模组标签热度词云',
            subtext: '标签出现次数越多，显示越大',
            left: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: '{b} : {c}次'
        },
        series: [{
            type: 'wordCloud',
            shape: 'circle',
            left: 'center',
            top: 'center',
            width: '90%',
            height: '80%',
            sizeRange: [20, 80],
            rotationRange: [-45, 45],
            gridSize: 12,
            drawOutOfBound: false,
            textStyle: {
                color: function () {
                    return 'rgb(' + [
                        Math.round(Math.random() * 160),
                        Math.round(Math.random() * 160),
                        Math.round(Math.random() * 160)
                    ].join(',') + ')';
                }
            },
            emphasis: {
                focus: 'self',
                textStyle: {
                    shadowBlur: 10,
                    shadowColor: '#333'
                }
            },
            data: {{ tag_data | tojson }}
        }]
    };

    wordCloudChart.setOption(wordCloudOption);

    // 散点图配置
    const scatterChartDom = document.getElementById('scatterChart');
    const scatterChart = echarts.init(scatterChartDom);

    const scatterOption = {
        title: {
            text: '模组红黑票分布',
            subtext: 'X轴：红票数，Y轴：黑票数',
            left: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: function (params) {
                return `${params.name}<br/>红票: ${params.value[0]}<br/>黑票: ${params.value[1]}`;
            }
        },
        xAxis: {
            name: '红票数',
            type: 'value',
            splitLine: {
                show: true
            }
        },
        yAxis: {
            name: '黑票数',
            type: 'value',
            splitLine: {
                show: true
            }
        },
        series: [{
            name: '模组',
            type: 'scatter',
            symbolSize: 10,
            data: {{ scatter_data | tojson }},
            label: {
                show: false,
                formatter: '{b}',
                position: 'right'
            },
            emphasis: {
                label: {
                    show: true, // 鼠标悬停时显示 mod 名称
                    fontSize: 14,
                    fontWeight: 'bold'
                },
                itemStyle: {
                    color: '#ff0000' // 悬停时点变红
                }
            }
        }]
    };

    scatterChart.setOption(scatterOption);

    window.addEventListener('resize', function () {
        pieChart.resize();
        wordCloudChart.resize();
        scatterChart.resize();
    });
</script>
{% endblock %}
